<template>
    <div class="title">父组件调用子组件的函数 defineExpose  ref</div>
    <div class="inner">
       <CommChild ref="commChildValue"></CommChild>
       <span>显示来自子组件的值：<b>{{spanInner.name}}</b></span>
       <input type="number" placeholder="输入第一个值" class="sumNum" v-model="a">
       <input type="number" placeholder="输入第二个值" class="sumNum" v-model="b">
       <button @click="invokeChild">点击调用子组件的函数</button>
       <span ref="refDomstr"></span>
    </div>
</template>

<script setup>

import {onMounted, ref} from 'vue';
import CommChild from '../../components/communicationParties/commChild.vue';
const commChildValue=ref(null);
let spanInner=ref('');
let refDomstr=ref(null);
let a=ref(0),b=ref(0);
onMounted(()=>{
    spanInner.value=commChildValue.value.content;
    console.log(spanInner.value);
    refDomstr.value.innerText='ref操作Dom';
    refDomstr.value.style.color='blue';
})
function invokeChild(){
    commChildValue.value.handleShow(a.value,b.value)
}
</script>
<style scoped>

span{
   display: block;
    margin: 10px;
}
.sumNum{
    width: 110px;
    text-indent: 5px;
}
</style>